<template>
  <div class="tabbar">
    <div class="main">
      <el-badge :value="8" class="item" @click="toShoppingCart">
        <div>
          <img src="@/static/images/common/tabbar1.png" alt="" />
        </div>
      </el-badge>
      <el-badge class="item">
        <div>
          <img src="@/static/images/common/tabbar2.png" alt="" />
        </div>
      </el-badge>
      <el-badge class="item" @click="toPersonal">
        <div>
          <img src="@/static/images/common/tabbar3.png" alt="" />
        </div>
      </el-badge>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { P_ROUTER } from '@/router/modules/personal';

export default defineComponent({
  setup() {
    const router = useRouter();
    const toPersonal = () => {
      router.push({
        path: P_ROUTER.ROOT.path,
      });
    };
    const toShoppingCart = () => {
      router.push({
        path: '/shopping-cart',
      });
    };
    return {
      toPersonal,
      toShoppingCart,
    };
  },
});
</script>

<style lang="scss" scoped>
.tabbar {
  width: 60px;
  height: 120px;
  position: fixed;
  top: 240px;
  right: 0px;

  .main {
    .item {
      width: 46px;
      height: 46px;
      text-align: center;
      line-height: 50px;
      border: 1px solid #ccc;
      border-radius: 5px;
      cursor: pointer;

      &:not(:first-child) {
        margin-top: 10px;
      }

      img {
      }
    }
  }
}
</style>
